import React, { useState } from 'react';
import { Space, Table, Tag, Popconfirm, Button, Modal, Input, Select } from 'antd';
import type { TableProps } from 'antd';
import type { listTS } from '../../store/listTS'
import { useAppDispatch, useAppSelector } from '../../store/getstateTs'
import * as asyncfn from '../../store/slice'
import Activeform from './activeform';
import dayjs from 'dayjs';
const Parameter: React.FC = () => {
  //   let [code, setCode] = useState('')
  //   let [name, setName] = useState('')
  //   let [stat, setStat] = useState(true)
  //   const handleChange = (value: string) => {
  //     setStat(value as any)
  // };
  let dispatch = useAppDispatch();
  let { list } = useAppSelector((state) => {
    return state.crms1;
  });
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [title, setTitle] = useState('添加')
  const [itemobj, setItemobj] = useState({})

  const showModal = () => {
    setIsModalOpen(true);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };

  let [current, sestCurrent] = useState('1')
  let [pageSize, setSize] = useState('2')
  let [total] = useState(list.length)
  const columns: TableProps<listTS>['columns'] = [
    {
      title: '优惠券名称',
      dataIndex: 'title',
    },
    {
      title: '优惠券面值',
      dataIndex: 'facevalue',
    },
    {
      title: '优惠券最低消费',
      dataIndex: 'consume',
    },
    {
      title: '优惠券有效期限',
      dataIndex: 'deadline',
    },
    {
      title: '排序',
      dataIndex: 'sort',
    },
    {
      title: '状态',
      dataIndex: 'state',
      render: (state) => {
        return <Tag color={state ? 'skyblue' : 'pink'}>{state ? '开启' : '关闭'}</Tag>
      },
    },
    {
      title: '创建时间',
      dataIndex: 'time',
      render: (time) => {
        return dayjs(time).format('YYYY-MM-DD HH:mm:ss ')
      }
    },
    {
      title: '操作',
      render: (_, record) => (
        <Space size="middle">
          <a onClick={() => {
            showModal()
            setTitle('编辑参数')
            setItemobj(record)
          }}>修改</a>
          <Popconfirm
            title="删除"
            description="确定删除?"
            onConfirm={() => {
              dispatch(asyncfn.async_dellist(record.id))
            }}
            okText="Yes"
            cancelText="No"
          >
            <a>删除</a>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  return (
    <div>
      {/* <div style={{ marginBottom: '10px' }}>
      参数名称：<Input placeholder="请输入参数名称" style={{ width: '200px', marginRight: '10px' }} value={code} onChange={(ev) => {
          setCode(ev.target.value)
        }} />
        参数键名：<Input placeholder="请输入参数键名" style={{ width: '200px', marginRight: '10px' }} value={name} onChange={(ev) => {
          setName(ev.target.value)
        }} />
        系统内置：<Select
          style={{ width: 120 }}
          onChange={handleChange}
          options={[
            { value: true, label: '是' },
            { value: false, label: '否' },
          ]}
        />
        <Button type="primary" style={{ marginRight: '10px' }} onClick={() => {
          if (code !== '') {
            dispatch(asyncfn.async_searchcode(code as any))
            return
          }
          if (name !== '') {
            dispatch(asyncfn.async_searchtitle(name))
            return
          }
          dispatch(asyncfn.async_searchstat(stat))
        }}>搜索</Button>
        <Button>重置</Button>
      </div> */}
      <Button style={{ marginBottom: '10px' }} onClick={() => {
        showModal()
        setTitle('添加参数')
        setItemobj({})
      }} type="primary">添加</Button>
      <Modal
        title={title}
        closable={{ 'aria-label': 'Custom Close Button' }}
        open={isModalOpen}
        onCancel={handleCancel}
        footer={null}
      >
        <Activeform onCancel={handleCancel} key={new Date().getTime()} title={title} itemobj={itemobj} />
      </Modal>
      <Table<listTS> columns={columns} dataSource={list} rowKey={"id"}
        pagination={{
          current, pageSize, total, pageSizeOptions: [1, 2, 3], showSizeChanger: true, showQuickJumper: true,
          onChange: (page, pageSize) => {
            sestCurrent(page)
            setSize(pageSize)
          }
        }} />
    </div>
  )
}

export default Parameter